import Vue from 'vue'
const ChildComponent = {
  template: '<div>child component{{data.value}}</div>',
  inject: ['yeye', 'data'],
  mounted () {
    console.log('father: ', this.$parent.$options.name)
    console.log('yeye: ', this.yeye)
    console.log('yeye value: ', this.data.value)
  }
}
const component = {
  name: 'componentFather',
  components: {
    ChildComponent
  },
  template: `<div :style="style">
    <slot :value="value" aaa="111"></slot>
    <child-component />
  </div>`,
  data () {
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa'
      },
      value: 'component value'
    }
  }
}
new Vue({
  components: {
    CompOne: component
  },
  provide () {
    const data = {}
    Object.defineProperty(data, 'value', {
      get: () => {
        return this.value
      },
      enumerble: true
    })
    return {
      yeye: this,
      data
    }
  },
  data () {
    return {
      value: '123'
    }
  },
  el: '#root',
  mounted () {
    console.log(this.$refs.comp.value, this.$refs.span)
  },
  template: `<div>
              <comp-one ref="comp">
                <span slot-scope="props" ref="span">{{props.value}} {{props.aaa}} {{value}}</span>
              </comp-one>
              <input type="text" v-model="value" />
            </div>`
})
